<template>
	<view class="wrapper">
		<view class="tag-top">
			<view class="info-group-title">
			    <text class="title-text">客户标签</text>
			    <view class="titele-edit" v-if="StoreTagList.length>0" @click="edit()"><image v-if="!editVaule" src="/static/img/edit.png"></image>{{editVaule?'完成':'编辑'}}</view>
			</view>
			<view class="info-bottom">
				<view class="info-kehu" v-for="(item,index) in StoreTagList">{{item}}<text class="btn-del" @click="handleDel(index)" v-if="editVaule"><uni-icons  size="40" type="closeempty"></uni-icons></text></view>
				<view class="info-kehu" v-if="StoreTagList.length==0">暂无标签</view>
				<!-- <view class="info-add" v-if="editVaule" @click="addtag">+添加</view> -->
			</view>
		</view>
		<view class="tag-top">
			<view class="info-group-title">
			    <text class="title-text">订货周期</text>
			</view>
			<view class="history">
				<view>历史订货周期：{{datas.HistoricalOrder}}天</view>
				<view>最后订货时间：{{datas.LastOrderTime}}</view>
				<view>距离最后订货：{{datas.LastOrderDay}}天<text v-if="datas.LastOrderDay > 0">(已超期{{datas.LastOrderDay}}天未订货)</text></view>
			</view>
		</view>
		<view class="tag-top">
			<view class="info-group-title">
			    <text class="title-text">销售统计<text class="small">（近半年）</text></text>
			</view>
			<view class="info-data">
				<view class="info-data-item" :class="datas.SaleMoneyPer >= 0?'info-up':'info-down'">
					<view>销售金额（元）</view>
					<view class="strong">{{datas.SaleMoney}}</view>
					<view class="ratio">环比<image :src="datas.SaleMoneyPer >= 0?'/static/icon/up.png':'/static/icon/down.png'" alt=""><text>{{datas.SaleMoneyPer}}%</text></view>
				</view>
				<view class="info-data-item" :class="datas.SaleCount >= 0?'info-up':'info-down'">
					<view>销售订单</view>
					<view class="strong">{{datas.SaleCount}}</view>
					<view class="ratio">环比<image :src="datas.SaleCount >= 0?'/static/icon/up.png':'/static/icon/down.png'" alt=""><text>{{datas.SaleCountPer}}%</text></view>
				</view>
			</view>
		</view>
		<view class="tag-top">
			<view class="info-group-title">
			    <text class="title-text">销售趋势<text class="small">（近半年）</text></text>
				<view class="info-tab">
					<view :class="tabnum == 1?'active':''" @click="tabCharts(1)">按金额</view>
					<view :class="tabnum == 2?'active':''" @click="tabCharts(2)">按订单</view>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view class="tag-top">
			<view class="info-group-title">
			    <text class="title-text">登录统计<text class="small">（近半年）</text></text>
			</view>
			<view class="info-data">
				<view class="info-data-item" style="line-height: 1.6;">
					<view>首次登录</view>
					<view>{{datas.FirstLogin}}</view>
					<view>最近登录</view>
					<view>{{datas.LastLogin}}</view>
				</view>
				<view class="info-data-item info-down">
					<view>登录次数</view>
					<view class="strong">10323</view>
					<view class="ratio">环比<image :src="datas.LoginCountPer >= 0?'/static/icon/up.png':'/static/icon/down.png'" alt=""><text>{{datas.LoginCountPer}}%</text></view>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts 
				      type="column"
				      :opts="opts1"
				      :chartData="chartData1"
				    />
			</view>
		</view>
		<uni-popup ref="amountTotalEdit" type="center" :animation="false" :mask-click="false">
		    <view class="pop-return-box">
				<view class="box-title">添加标签</view>
		        <input type="text" class="box-input" v-model="tagVaule" placeholder="请输入标签名称" />
		        <view class="pop-action">
		            <view @click="amountTotalEditClose">取消</view>
		            <view @click="amountTotalEditConfirm">确定</view>
		        </view>
		    </view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		agenttracklist,
		UserSaleRrport
	} from "@/service/api/erp.js"
	import {
		GuideEditStoreTagids
	} from "@/service/api/store.js"
	import storage from "@/uni-sub-base/utils/storage.js"
	export default {
		props: {
			StoreUserId: {
				type: String
			},
			height: {
				type: String,
				default: '100px'
			},
			userData: {
			    type: Object,
			    default: () => {},
			},

		},
		data() {
			return {
				couponAmount:'',
				editVaule:false,
				storeId: '',
				chartData: {},
				chartData1: {},
				opts: {
					color: ["#F1270C"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
							activeType: "hollow"
						}
					}
				},
				opts1: {
				  color: ["#F1270C","#91CB74"],
				  padding: [15,15,0,5],
				  enableScroll: false,
				  legend: {},
				  xAxis: {
				    disableGrid: true
				  },
				  yAxis: {
				    data: [
				      {
				        min: 0
				      }
				    ]
				  },
				  extra: {
				    column: {
				      type: "group",
				      width: 30,
				      activeBgColor: "#000000",
				      activeBgOpacity: 0.08
				    }
				  }
				},
				StoreTagList:[],
				StoreTagIds:[],
				datas:{},
				tabnum:1
			}
		},
		onReady() {
		},
		mounted() {
			this.storeId = storage.getCache('businessCode')
			this.getServerData();
			this.getServerData1();
			if(this.userData.StoreTagNames){
				this.StoreTagList = this.userData.StoreTagNames.split(',')
				this.StoreTagIds = this.userData.StoreTagIds.split(',')
			}
			this.getInfoData()
		},
		onShow() {},
		methods: {
			getInfoData(){
				let param = {
					userid:this.StoreUserId
				}
				UserSaleRrport(param).then((res) => {
					if (res.State == 1) {
						this.datas = res.Data
					} else {
						this.easyToast(res.Msg)
					}
				})
			},
			tabCharts(num){
				this.tabnum = num;
				if(this.tabnum==1){
					this.getServerData()
				}else{
					this.getServerData()
				}
			},
			getServerData() {
				this.chartData = {}
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "销售趋势",
								data: [35, 8, 25, 37, 4, 20]
							},
						
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerData1() {
			  //模拟从服务器获取数据时的延时
			  setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ["2018","2019","2020","2021","2022","2023"],
					series: [
					  {
						name: "登录统计",
						data: [35,36,31,33,13,34]
					  }
					]
				  };
				this.chartData1 = JSON.parse(JSON.stringify(res));
			  }, 500);
			},
			edit(){
				this.editVaule = !this.editVaule;
				
				if(!this.editVaule){
					let param = {
						id:this.StoreUserId,
						storeTagIds:this.StoreTagIds.join(',')
					}
					GuideEditStoreTagids(param).then((res) => {
						if (res.State == 1) {
							// this.easyToast('修改成')
						} else {
							this.easyToast(res.Msg)
						}
					})
				}
			},
			handleDel(index){
				this.StoreTagList.splice(index, 1)
				this.StoreTagIds.splice(index, 1)
				console.log(this.StoreTagList)
			},
			addtag() {
			    this.$refs.amountTotalEdit.open()
			},
			amountTotalEditClose() {
			    this.$refs.amountTotalEdit.close()
			},
			amountTotalEditConfirm() {
			   
			    this.$refs.amountTotalEdit.close()
			},
		}
	}
</script>

<style lang="scss">
.wrapper{
	padding:0 24rpx 24rpx 24rpx;
	height:calc(100% - 24rpx);
	overflow-y: scroll;
}
.tag-top{
	margin-bottom: 24rpx;
}
.info-group-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	height: 88rpx;
	padding: 0 24rpx;
	.title-text {
		font-size: $font-size-28;
		font-weight: 700;
		flex: 1;
		color: $color-gray-1;
		.small{
			font-size: 24rpx;
		}
	}
	.titele-edit {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 24rpx;
		color: #4070ff;
		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 6rpx;
		}
	}
	.title-action {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
}
.info-bottom{
	display: flex;
	padding:0 0rpx 24rpx 28rpx;
	background: #fff;
	flex-wrap:wrap;
	&>view{
		background:rgba(241,39,12,0.1);
		font-size: 28rpx;
		color: #222A42;
		padding: 8rpx 24rpx;
		margin-right: 26rpx;
		margin-bottom: 16rpx;
	}
	.info-kehu{
		position: relative;
	}
	.btn-del{
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}
	.info-add{
		background: #F5F6F7;
		color: #999999;
	}

}
.history{
	padding: 0 26rpx 24rpx;
	background: #fff;
	font-size: 26rpx;
	line-height: 1.6;
}
.info-data{
	padding: 0 24rpx 24rpx 24rpx;
	display: flex;
	justify-content: space-between;
	background: #fff;
}
.info-data-item{
	padding: 24rpx 30rpx;
	color:#666;
	font-size: 24rpx;
	width: 256rpx;
	.strong{
		font-size: 36rpx;
		font-weight: bold;
		color:#333;
		padding: 12rpx 0;
	}
	.ratio{
		image{
			width: 24rpx;
			height: 24rpx;
			vertical-align: -4rpx;
		}
		text{
			font-size: 28rpx;
			color:#333;
			font-weight: bold;
		}
	}
}

.info-up{
	background: #FFF5F4;
}
.info-down{
	background: #EFFCF7;
}
.info-tab{
	width: 192rpx;
	height: 48rpx;
	background: #F5F6F7;
	border-radius: 4rpx;
	display: flex;
	justify-content: flex-start;
	&>view{
		width: 50%;
		font-size: 22rpx;
		color:#666;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.active{
		width: 90rpx;
		height: 40rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 8rpx 0px rgba(51,51,51,0.09);
		border-radius: 4px;
		color: #F1270C;
		font-weight: bold;
		margin-top: 4rpx;
	}
}
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 440rpx;
		background: #fff;
	}
	.box-title{
		font-size: 34rpx;
		color: #000000;
		line-height: 48rpx;
		text-align: center;
		font-weight: bold;
		padding: 30rpx 0;
	}
	.box-input{
		margin:0 auto;
		margin-bottom: 30rpx;
		width: 544rpx;
		height: 116rpx;
		background: #F7F7F7;
		border-radius: 8rpx;
		
	}
</style>
